<%@ include file="/WEB-INF/common/taglibs.jsp"%>
<style>
.table td div {
	width: 70%;
	height: 15px
}
.legend {
	margin: 15px 0;
	line-height: 1;
	display: block;
	overflow: hidden;
}

.legend li {
	display: block;
	float: left;
	width: auto;
	margin: 0 8px 10px 0;
	padding: 0;
	background: none;
	color: #666;
	text-align: right;
}

.legend div {
	display: inline-block;
	width: 10px;
	height: 10px;
	vertical-align: top;
	line-height: 30px;
	margin: 0 3px 0 0;
}

.legendSelect {
	border: 1px solid #E5D531;
	background: #E5D531;
}

.legendValid {
	border: 1px solid #999;
	background: #49afcd;
}

.legendInvalid {
	border: 1px solid #eee;
	background: #fafafa;
}
.paid {
	border: 1px solid #999;
	background: #49afcd;
        cursor: pointer;
}

.closed {
	border: 1px solid #999;
	background: #ff7f00;
        cursor: pointer;
}
.pending {
	border: 1px solid #E5D531;
	background: #E5D531;
        cursor: pointer;
}
</style>

<script type="text/javascript">
$(document).ready(function() {

	
 $('#startDate').datepicker( {
    	showButtonPanel: true,
   	    dateFormat: 'MM yy',
   	    onClose: function(dateText, inst) { 
	    var loca  =  '${ctx}'+'/admin/facility-booking/list/'+inst.selectedYear+"/"+inst.selectedMonth+"/";
	    $('#go').attr('link',loca);	           
       }
    });

    $('#go').click(function(){
        var link = $(this).attr('link');
 		if (link!=null){
 		 window.location = link;
 	}
 });
		 
	 	$(".triggle-up").click(function(){
	 
	  			$('.minimize').not('.no-triggle').each(function(index, obj){
	  				 
	  				$this = $(obj);
	 				$this.removeClass('minimize').addClass('maximize');
	 				$this.parent('div').addClass('min');
	 				cont = $this.parent('div').next('div.content')
	 				cont.slideUp(500, 'easeOutExpo'); //change effect if you want :)
	  			});
	 		
	 	});
	    //triggle-down
	 		
	 	$(".triggle-down").click(function(){
			 
				$('.maximize').not('.no-triggle').each(function(index, obj){
					 
					$this = $(obj);
					$this.removeClass('maximize').addClass('minimize');
					$this.parent('div').removeClass('min');
					cont = $this.parent('div').next('div.content');
					cont.slideDown(500, 'easeInExpo'); //change effect if you want :)
				});
			
		});
    
    
    }
);

</script>
<div class="row-fluid">
<div class="span16">
<div class="centerContent">

<div class="span16">
<div class="box boxMargin ">
<div class="title">
<h4><span class="icon16 icomoon-icon-pencil"></span> <span>Booking
Summary.</span>

 

</h4>
<a href="#" class="minimize no-triggle">Minimize</a></div>
<div class="content">
<div class="form-row row-fluid">
<div class="span12">
<div class="span6">
<div class="row-fluid">
<label class="form-label span4">Summary Month</label>
<div class="input-append"><input class="span4 text"
	name="startDate" id="startDate" size="16" type="text" readonly="readonly" value="${dateText}" style="cursor: pointer;">
<button id="go" class="btn" type="button">Go!</button>
</div>
</div>
</div>
 
<div class="span6">
<div class="row-fluid">
<div class="span4">
<button  class="btn" type="button" onclick="window.print()">Print </button>
</div>
<div class="span4">
<button  class="btn triggle-up" type="button">Up </button>
</div>

<div class="span4">
<button  class="btn triggle-down" type="button">Down </button>
</div>
</div>

</div> 
 

</div>




</div>
<div class="form-row row-fluid">

<ul class="legend">
	<li>
	<div class="legendSelect"></div>
	Pending</li>
	<li>
	<div class="legendValid"></div>
	Paid</li>
	<li>
	<div class="legendInvalid"></div>
	Available</li>
</ul>


</div>

</div>
</div>
</div>
</div>
</div>
</div>
<!-- function start -->
<div class="row-fluid">
<div class="span6">
<div class="centerContent">

<div class="span12">
<div class="box boxMargin closed">
<div class="title">
<h4>
<shiro:hasPermission name="facility-booking:edit">
		<a href="${ctx}/admin/facility-booking/create/${pv1.id}/" >
<span class="icon16 icomoon-icon-pencil"> </span></a>
</shiro:hasPermission>
<span>PRIVATE VILLA</span></h4>
<a href="#" class="maximize">Minimize</a></div>

<div class="content clearfix">
<table class="table scrollable table-bordered">
	<thead>
	 
		<tr>
			<th></th>
			<th>10.00 am to 3.00 pm</th>
			<th>5.00 pm to 10.00 pm</th>
		</tr>
	</thead>
	<tbody>
		<c:forEach var="u" items="${pv1.dailySummaries}" varStatus="status">
			<tr>

				<th>${status.count}</th>
				<c:forEach var="book" items="${u.facilityBookings}">
					<td>
					<div class="${book.status}" title="${book.desc}"
						<c:if test="${not empty book.id}">
	<shiro:hasPermission name="facility-booking:edit">
						 onclick="javascript:window.location= '/admin/facility-booking/${book.id}/edit/'"
	</shiro:hasPermission>
					</c:if>>
					${book.member.unitNumber}
					</div>
					</td>
				</c:forEach>
			</tr>
		</c:forEach>
	</tbody>
</table>
</div>
</div>
</div>
</div>
</div>

<div class="span6">
<div class="centerContent">

<div class="span12">
<div class="box boxMargin closed">
<div class="title">
<h4>
<shiro:hasPermission name="facility-booking:edit">
<a href="${ctx}/admin/facility-booking/create/${ka1.id}/" ><span class="icon16 icomoon-icon-pencil"> </span></a>
</shiro:hasPermission>


 <span>KARAOKE ROOM</span></h4>
<a href="#" class="maximize">Minimize</a></div>

<div class="content clearfix">
<table class="table scrollable table-bordered">
	<thead>
	 
		<tr>
			<th></th>
			<th>10.00 am to 3.00 pm</th>
			<th>5.00 pm to 10.00 pm</th>
 		</tr>
	</thead>
	<tbody>
		<c:forEach var="u" items="${ka1.dailySummaries}" varStatus="status">
			<tr>

				<th>${status.count}</th>
				<c:forEach var="book" items="${u.facilityBookings}">
					<td>
					<div class="${book.status}" title="${book.desc}"
						<c:if test="${not empty book.id}">
						<shiro:hasPermission name="facility-booking:edit">
						 onclick="javascript:window.location= '/admin/facility-booking/${book.id}/edit/'"
						 </shiro:hasPermission>
					</c:if>>
					${book.member.unitNumber}
					</div>
					</td>
				</c:forEach>
			</tr>
		</c:forEach>
	</tbody>
</table>
</div>
</div>
</div>
</div>
</div>


</div>
<!-- function end -->

<!--start bbq 1-->

<div class="row-fluid">
<div class="span6">
<div class="centerContent">

<div class="span12">
<div class="box boxMargin closed">
<div class="title">
<h4>
<shiro:hasPermission name="facility-booking:edit">
<a href="${ctx}/admin/facility-booking/create/${b1.id}/" ><span class="icon16 icomoon-icon-pencil"> </span></a>
</shiro:hasPermission>
 <span>BBQ
Pits 1</span></h4>
<a href="#" class="maximize">Minimize</a></div>

<div class="content clearfix">
<table class="table scrollable table-bordered">
	<thead>
	 
		<tr>
			<th></th>
		<th>10.00 am to 4.00 pm</th>
			<th>5.00 pm to 10.00 pm</th>
		</tr>
	</thead>
	<tbody>
		<c:forEach var="u" items="${b1.dailySummaries}" varStatus="status">
			<tr>

				<th>${status.count}</th>
				<c:forEach var="book" items="${u.facilityBookings}">
					<td>
					<div class="${book.status}" title="${book.desc}"
						<c:if test="${not empty book.id}">
							<shiro:hasPermission name="facility-booking:edit">
						 onclick="javascript:window.location= '/admin/facility-booking/${book.id}/edit/'"
						 </shiro:hasPermission >
					</c:if>>
					${book.member.unitNumber}
					</div>
					</td>
				</c:forEach>
			</tr>
		</c:forEach>
	</tbody>
</table>
</div>
</div>
</div>
</div>
</div>

<div class="span6">
<div class="centerContent">

<div class="span12">
<div class="box boxMargin closed">
<div class="title">
<h4>
<shiro:hasPermission name="facility-booking:edit">
<a href="${ctx}/admin/facility-booking/create/${b2.id}/" ><span class="icon16 icomoon-icon-pencil"> </span></a>
</shiro:hasPermission>


<span>BBQ
Pits 2</span></h4>
<a href="#" class="maximize">Minimize</a></div>

<div class="content clearfix">
<table class="table scrollable table-bordered">
	<thead>
	 
		<tr>
			<th></th>
		<th>10.00 am to 4.00 pm</th>
			<th>5.00 pm to 10.00 pm</th>
		</tr>
	</thead>
	<tbody>
		<c:forEach var="u" items="${b2.dailySummaries}" varStatus="status">
			<tr>

				<th>${status.count}</th>
				<c:forEach var="book" items="${u.facilityBookings}">
					<td>
					<div class="${book.status}" title="${book.desc}"
						<c:if test="${not empty book.id}">
						<shiro:hasPermission name="facility-booking:edit">
						 onclick="javascript:window.location= '/admin/facility-booking/${book.id}/edit/'"
						 </shiro:hasPermission>
						 
					</c:if>>
					${book.member.unitNumber}
					</div>
					</td>
				</c:forEach>
			</tr>
		</c:forEach>
	</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end bbq2  -->

<!-- start bbq3  -->
<div class="row-fluid">
<div class="span6">
<div class="centerContent">

<div class="span12">
<div class="box boxMargin closed">
<div class="title">
<h4>
<shiro:hasPermission name="facility-booking:edit">
<a href="${ctx}/admin/facility-booking/create/${b3.id}/" ><span class="icon16 icomoon-icon-pencil"> </span></a>
</shiro:hasPermission>
<span>BBQ
Pits 3</span></h4>
<a href="#" class="maximize">Minimize</a></div>

<div class="content clearfix">
<table class="table scrollable table-bordered">
	<thead>
	 
		<tr>
			<th></th>
			<th>10.00 am to 4.00 pm</th>
			<th>5.00 pm to 10.00 pm</th>
		</tr>
	</thead>
	<tbody>
		<c:forEach var="u" items="${b3.dailySummaries}" varStatus="status">
			<tr>

				<th>${status.count}</th>
				<c:forEach var="book" items="${u.facilityBookings}">
					<td>
					<div class="${book.status}" title="${book.desc}"
						<c:if test="${not empty book.id}">
						<shiro:hasPermission name="facility-booking:edit">
 						 onclick="javascript:window.location= '/admin/facility-booking/${book.id}/edit/'"
 						 </shiro:hasPermission>
					</c:if>>
					${book.member.unitNumber}
					</div>
					</td>
				</c:forEach>
			</tr>
		</c:forEach>
	</tbody>
</table>
</div>
</div>
</div>
</div>
</div>

<div class="span6">
<div class="centerContent">

<div class="span12">
<div class="box boxMargin closed">
<div class="title">
<h4>
<shiro:hasPermission name="facility-booking:edit">
<a href="${ctx}/admin/facility-booking/create/${b4.id}/" ><span class="icon16 icomoon-icon-pencil"> </span></a>
</shiro:hasPermission>

 <span>BBQ Pits 4</span></h4>
<a href="#" class="maximize">Minimize</a></div>

<div class="content clearfix">
<table class="table scrollable table-bordered">
	<thead>
	 
		<tr>
			<th></th>
			<th>10.00 am to 4.00 pm</th>
			<th>5.00 pm to 10.00 pm</th>
 		</tr>
	</thead>
	<tbody>
		<c:forEach var="u" items="${b4.dailySummaries}" varStatus="status">
			<tr>

				<th>${status.count}</th>
				<c:forEach var="book" items="${u.facilityBookings}">
					<td>
					<div class="${book.status}" title="${book.desc}"
						<c:if test="${not empty book.id}">
						<shiro:hasPermission name="facility-booking:edit">
						  onclick="javascript:window.location= '/admin/facility-booking/${book.id}/edit/'"
						  </shiro:hasPermission >
						   </c:if>>
					${book.member.unitNumber}
					</div>
					</td>
				</c:forEach>
			</tr>
		</c:forEach>
	</tbody>
</table>
</div>
</div>
</div>
</div>
</div>


</div>
<!-- end bbq4  -->

<!-- tennis counter -->
<div class="row-fluid">
<div class="span16">
<div class="centerContent">

<div class="span16">
<div class="box boxMargin closed closed">
<div class="title">
<h4>
<span class="icon16">
<shiro:hasPermission name="facility-booking:edit">  
<a href="${ctx}/admin/facility-booking/create/${t1.id}/" ><span class="icon16 icomoon-icon-pencil"> </span></a>
</shiro:hasPermission>
</span> <span>Tennis
Court 1.</span></h4>
<a href="#" class="maximize">Minimize</a></div>

<div class="content clearfix">
<table class="table scrollable table-bordered">
	<thead>
		<tr>
			<th></th>
			<th>7:00</th>
			<th>8:00</th>
			<th>9:00</th>
			<th>10:00</th>
			<th>11:00</th>
			<th>12:00</th>
			<th>13:00</th>
			<th>14:00</th>
			<th>15:00</th>
			<th>16:00</th>
			<th>17:00</th>
			<th>18:00</th>
			<th>19:00</th>
			<th>20:00</th>
			<th>21:00</th>
		
		</tr>
	</thead>
	<tbody>
		<c:forEach var="u" items="${t1.dailySummaries}" varStatus="status">
			<tr>

				<th>${status.count}</th>
				<c:forEach var="book" items="${u.facilityBookings}">
					<td>
					<div class="${book.status}" title="${book.desc}"
						<c:if test="${not empty book.id}">
						<shiro:hasPermission name="facility-booking:edit">
						 onclick="javascript:window.location= '/admin/facility-booking/${book.id}/edit/'"
						 </shiro:hasPermission>
					</c:if>>
					${book.member.unitNumber}
					</div>
					</td>
				</c:forEach>
			</tr>
		</c:forEach>
	</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- tennis counter -->
<!-- start tennis -->
<div class="row-fluid">
<div class="span16">
<div class="centerContent">

<div class="span16">
<div class="box boxMargin closed">
<div class="title">
<h4>
<shiro:hasPermission name="facility-booking:edit">
<a href="${ctx}/admin/facility-booking/create/${t2.id}/" ><span class="icon16 icomoon-icon-pencil"> </span></a>
</shiro:hasPermission>
<span>Tennis
Court 2.</span></h4>
<a href="#" class="maximize">Minimize</a></div>
<div class="content clearfix">
<table class="table scrollable table-bordered">
	<thead>
		<tr>
			<th></th>
			<th>7:00</th>
			<th>8:00</th>
			<th>9:00</th>
			<th>10:00</th>
			<th>11:00</th>
			<th>12:00</th>
			<th>13:00</th>
			<th>14:00</th>
			<th>15:00</th>
			<th>16:00</th>
			<th>17:00</th>
			<th>18:00</th>
			<th>19:00</th>
			<th>20:00</th>
			<th>21:00</th>
			
		</tr>
	</thead>
	<tbody>
		<c:forEach var="u" items="${t2.dailySummaries}" varStatus="status">
			<tr>

				<th>${status.count}</th>
				<c:forEach var="book" items="${u.facilityBookings}">
					<td>
					<div class="${book.status}" title="${book.desc}"
						<c:if test="${not empty book.id}">
						<shiro:hasPermission name="facility-booking:edit">
						
						 onclick="javascript:window.location= '/admin/facility-booking/${book.id}/edit/'"
						 
						 </shiro:hasPermission>
						 
					</c:if>>
					${book.member.unitNumber}
					</div>
					</td>
				</c:forEach>
			</tr>
		</c:forEach>
	</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end tennis -->